import { useContext } from "react";
import { TouchableOpacity, Text } from "react-native";
import { ThemeContext } from "../context/ThemeContext";
import { Styles } from "../styles/GlobalStyles";

// 定义按钮组件的属性类型
interface ButtonProps {
    // 点击回调函数
    onPress: () => void;
    // 按钮显示文本
    title: string;
    // 是否为蓝色样式
    isBlue?: boolean;
    // 是否为灰色样式
    isGray?: boolean;
}

export default function Button({ onPress, title, isBlue, isGray }: ButtonProps) {
    // 获取当前主题（light 或 dark）
    const theme = useContext(ThemeContext);
    return (
        <TouchableOpacity
            style={
                // 根据 isBlue、isGray 以及主题，设置按钮样式
                isBlue
                    ? [Styles.btnBlue, Styles.btn]
                    : isGray
                        ? [Styles.btnGray, Styles.btn]
                        : theme === "light"
                            ? [Styles.btnLight, Styles.btn]
                            : [Styles.btnDark, Styles.btn]
            }
            // 绑定点击事件
            onPress={onPress}
        >
            <Text
                style={
                    isBlue || isGray
                        ? Styles.smallTextLight
                        : theme === "dark"
                            ? Styles.smallTextLight
                            : Styles.smallTextDark
                }
            >
                {/* 显示按钮文本 */}
                {title}
            </Text>
        </TouchableOpacity>
    )
}
